<!--
* @Author: 杨小龙/Yangxiaolong
* @Description: component_name ；
* @Date: 2021-00-00 00:00:00
-->
<template>
  <div class="left-top-container">
    <Title>销售统计</Title>
    <v-chart :option="charts_option"></v-chart>
  </div>
</template>
<script setup lang="ts">
import type { ECOption } from "@/components/index.ts";
import { Title } from "@/components/index";
import echarts from "@/components/chart";
import { ref } from "vue";
import { getSalesList } from "@/api/modules/sales";
import { RequestEnum } from "@/common/canstant";
import type { ISales } from "@/api/types";

import { useAsyncState } from "@/composables/useAsyncState";
import type { ResultData } from "@/api/interface";

const charts_option = ref<ECOption>({});

const setChartsOption = (sales_state: ISales[]) => {
  charts_option.value = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    xAxis: {
      splitLine: { show: false },
      axisLine: { show: true },
      type: "value",
      axisLabel: { color: "#fff" },
      max: (v: { max: number }) => parseInt(v.max * 1.2 + ""),
    },
    yAxis: {
      type: "category",
      data: sales_state.map((item) => item.name.toUpperCase()),
      inverse: true,
      axisLine: { show: true },
      axisTick: { show: false },
      axisLabel: { color: "#fff" },
    },
    grid: {
      top: "2%",
      left: "4%",
      right: "3%",
      bottom: "10%",
      containLabel: true,
    },
    series: [
      {
        type: "bar",
        label: {
          show: true,
          position: "right",
        },
        data: sales_state.map((item) => item.value),
        barWidth: 20,
        roundCap: true,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(220, 220, 220, 0.3)",
        },
        itemStyle: {
          borderWidth: 0,
          borderRadius: [0, 8, 8, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#1488cc" },
            { offset: 1, color: "#43eec6" },
          ]),
        },
      },
    ],
  };
};

const { data } = useAsyncState<ResultData>(getSalesList, {
  onSuccess: (res) => {
    if (res.code === RequestEnum.SUCCESS) {
      setChartsOption(res.data as ISales[]);
    }
  },
  onError: (error) => {
    console.error("销售数据加载失败了...", error);
  },
});
</script>
<style lang="scss" scoped>
.left-top-container {
  padding: 8px;
  width: 100%;
  height: 420px;
  background-color: #2b2a2a;
}
</style>
